<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="divUserInfo" style="width: 80%;margin: 0px auto">

    <!--查询条件部分-->
    <el-form ref="userBeanForm" :model="userBeanForm" label-width="80px">
        <el-row>
            <el-col :span="12">
                <el-form-item label="用户姓名">
                    <el-col :span="18">
                        <el-input v-model="userBeanForm.username"></el-input>
                    </el-col>
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item label="年龄">
                    <el-col :span="11">
                        <el-input v-model="userBeanForm.userage"></el-input>
                    </el-col>
                    <el-col class="line" :span="1" :offset="1">-</el-col>
                    <el-col :span="11">
                        <el-input v-model="userBeanForm.userage2"></el-input>
                    </el-col>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
                <el-form-item label="地址">
                    <el-col :span="18">
                        <el-input v-model="userBeanForm.useraddress"></el-input>
                    </el-col>
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item label="注册日期">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="开始时间" v-model="userBeanForm.userregdate"
                                        style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="1" :offset="1">-</el-col>
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="结束时间" v-model="userBeanForm.userregdate2"
                                        style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
            </el-col>
        </el-row>

        <el-form-item>
            <el-row>
                <el-col :span="8">
                    <el-button type="primary" @click="doquery">查询</el-button>
                </el-col>
                <el-col :span="8">
                    <el-button type="info" @click="resetForm(userBeanForm)">重置</el-button>
                </el-col>
                <el-col :span="8">
                    <el-button type="success" @click="">新增</el-button>
                </el-col>
            </el-row>
        </el-form-item>
    </el-form>

    <!--查询结果集显示部分-->
    <!--data属性绑定的是vue组件中的数据结果集，如果data绑定的数据发生变化，则table会进行自动更新【由vue的数据的双向绑定功能实现】-->
    <el-table
            ref="multipleTable"
            :data="lstUserInfo"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>

        <el-table-column
                type="index"
                width="50">
        </el-table-column>

        <el-table-column
                prop="username"
                label="用户姓名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="userage"
                label="年龄"
                width="120">
        </el-table-column>
        <el-table-column
                prop="useraddress"
                label="地址"
                show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="userregdate"
                label="注册日期"
                width="120">
            <!--<template slot-scope="scope">{{ scope.row.date }}</template>-->
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <template scope="scope">
                    <el-button :plain="true" type="success" size="small" icon="edit" @click="editClick(scope.row)">编辑
                    </el-button>
                    <el-button :plain="true" type="danger" size="small" icon="delete" @click="deleteClick(scope.row)">
                        删除
                    </el-button>
                </template>
            </template>
        </el-table-column>
    </el-table>



    <!--<div style="margin-top: 20px">
        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
    </div>-->

    <!--新增模态框部分-->

</div>
<!--引入vue的库，一定要在element库文件之前-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/element-ui/lib/table.js"></script>
<!--引入axios库，完成后台异步请求的http通信，替代jquery ajax（也可以使用）-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--解决axios跨域无法传递form表单数据到后台实体类的问题-->
<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
<!--使用vue组件进行处理-->
<script type="text/javascript">
    var app = new Vue({
        el: "#divUserInfo",
        data: {
            // form表单绑定的实体类数据结构
            // 数据模型和form表单绑定
            userBeanForm: {
                username: '',
                userpsw: '',
                userage: '',
                userage2: '',
                useraddress: '',
                userregdate: '',
                userregdate2: ''
            },
            // table表格绑定的数据结果集【数组和list集合】
            // 数据模型和table显示列表绑定
            lstUserInfo:[],

        },
        methods: {
            /*查询部分的方法*/
            doquery:function () {
                let req_data = Qs.stringify(this.userBeanForm);
                // 当前this对象进行别名处理
                _self = this;
                // 同服务器进行异步通信，验证用户登陆的合法性
                axios.post('http://localhost:9091/springboot_vue_elementui_server20191024/doAjaxUserInfoQueryByPramas', req_data) .then(function (response) {
                    console.log(response.data);
                    // 更新vue的table的数据模型 lstUserInfo
                    _self.lslstUserInfo = response.data;
                    console.info("绑定table数据之后：：：")
                    console.log(_self.lslstUserInfo);
                })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            // 重置表单数据
            resetForm(formName) {
                //this.$refs[formName].resetFields();
            },
            /*数据显示部分的方法*/
            
            // 处理显示列表左侧多选框的方法
            handleSelectionChange:function () {
                
            },
            // 进行编辑操作
            editClick:function (data) {
                
            },
            // 进行删除操作
            deleteClick:function (data) {
                
            }
        }
    });

</script>
</body>
</html>